<template>
  <div class="wallet_modal">
    <el-row :gutter="20">
      <el-col :span="6">
        <div>账户余额：¥<span class="total_money">{{ amountMoney }}</span></div>
      </el-col>
      <el-col :span="6">
        <div>保证金：¥<span>{{ userInfo.contributeCount }}</span></div>
      </el-col>
      <el-col :span="12">
        <div class="wallet_modal_button">
          <el-button class="button_1" type="primary" @click="onReCharge">充值</el-button>
          <el-button type="primary" @click="takeBack">提现</el-button>
        </div>
      </el-col>
    </el-row>
    <el-table
      :data="dataList"
      style="width: 100%"
    >
      <el-table-column
        prop="paySn"
        label="支付单号"
        width="170"
      />
      <el-table-column
        prop="type"
        label="支入类型"
      />
      <el-table-column
        prop="status"
        label="状态"
      />
      <el-table-column
        prop="price"
        label="金额"
      />
      <el-table-column
        prop="payTime"
        label="操作时间"
      />
      <el-table-column
        prop="payTime"
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <el-button type="primary" @click="releaseMoney(scope.row)">退款</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="充值"
      width="30%"
      :append-to-body="true"
      :visible.sync="rechargeVisible"
      :before-close="onCloseRecharge">
      <div>
        <el-row :gutter="20">
          <el-col :span="18">
            <el-col :span="8">账户余额：</el-col>
            <el-col :span="16"><el-input type="number" placeholder="请输入金额" v-model="totalFee"></el-input></el-col>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="addInWallet">确定</el-button>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
    <el-dialog
      title="提现"
      width="30%"
      :append-to-body="true"
      :visible.sync="returnBackVisbile"
      :before-close="onCloseBack">
      <div>
        <el-row :gutter="20">
          <el-col :span="18">
            <el-col :span="8">提现金额：</el-col>
            <el-col :span="16"><el-input type="number" placeholder="请输入金额" v-model="extractFee"></el-input></el-col>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="extractMoney">确定</el-button>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { queryWalletList } from '@/api/platFinanceStatement';
import { rechargeWallet, fetchRefund, fetchMerchant } from '@/api/yzWallet';

export default {
  name: 'walletDetail',
  props: {
    amountMoney: 0,
    currUserId: '',
    userInfo: {}
  },
  data() {
    return {
      dataList: [],
      rechargeVisible: false,
      totalFee: 0,
      returnBackVisbile: false,
      extractFee: 0
    }
  },
  mounted() {
    this.getWalletList();
  },
  methods: {
    // 获取钱包页数据
    async getWalletList() {
      const userInfo = sessionStorage.getItem('userInfo');
      const userId = JSON.parse(userInfo)['id'];
      const { data } = await queryWalletList({ userId  });
      if (data.code === 200) {
        this.dataList = data.data || [];
      } else {
        this.$message({
          message: data.msg || '信息获取失败',
          type: 'error',
          showClose: true,
          duration: 3000,
        });
      }
    },
    onReCharge() {
      this.rechargeVisible = true;
    },
    onCloseRecharge() {
      this.rechargeVisible = false;
    },
    // 充值
    async addInWallet () {
      const params = { totalFee: this.totalFee, type: 'h5' }
      const { data } = await rechargeWallet(params);
      if (data.code === 200) {
        this.$message({
          message: data.msg,
          type: 'success',
        });
        this.onCloseRecharge();
        // 刷新列表
        this.getWalletList();
      } else {
        this.$message({
          message: data.msg || '信息获取失败',
          type: 'error',
          showClose: true,
          duration: 3000,
        });
      }
    },
    takeBack() {
      this.returnBackVisbile = true;
    },
    onCloseBack() {
      this.returnBackVisbile = false;
    },
    // 提现
    async extractMoney() {
      const params = { price: Number.parseFloat(this.extractFee), userId: this.currUserId }
      const { data } = await fetchMerchant(params);
      if (data.code === 200) {
        this.$message({
          message: data.msg,
          type: 'success',
        });
        this.onCloseBack();
        // 刷新列表
        this.getWalletList();
      } else {
        this.$message({
          message: data.msg || '信息获取失败',
          type: 'error',
          showClose: true,
          duration: 3000,
        });
      }
    },
    // 退款
    async releaseMoney(row) {
      const params = { totalFee: row.price, outTradeNo: row.paySn }
      const { data } = await fetchRefund(params);
      if (data.code === 200) {
        this.$message({
          message: data.msg,
          type: 'success',
        });
        // 刷新列表
        this.getWalletList();
      } else {
        this.$message({
          message: data.msg || '信息获取失败',
          type: 'error',
          showClose: true,
          duration: 3000,
        });
      }
    }
  }
}
</script>
<style scoped>
.total_money {
  margin-left: 3px;
  font-size: 20px;
  color: red;
}
/deep/ .el-dialog__body {
  padding-top: 16px !important;
}
.wallet_modal_button {
  float: right;
}
.button_1 {
  margin-right: 10px;
}
</style>